<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>first socket</title>
</head>
<body>
<h1>myfitst room</h1>
<input type="text" id="snedTxt" />
<button id="sendb">发送</button>
<div id="recv"></div>
<script type="text/javascript">

    var arr = [];

    function conn() {
        var ws = new WebSocket("ws://localhost:1000/");// 设置服务器地址 //
        ws.onopen=function(){  // onopen 连接触发 //
            console.log("websocket open");
            document.getElementById("recv").innerHTML="Connected";
            //  innerHTML 可以 获取 也可以 插入  //
        }
        ws.onclose=function(){ // onclose 断开触发 //
            console.log("websocket close");
            const index = arr.findIndex((item)=> item === ws);
            arr.splice(index, 1);
        }
        ws.onmessage =function(e){ // onmessage 接收到信息触发  //
            console.log(e.data);
            document.getElementById("recv").innerHTML = e.data;
        };

        arr.push(ws);
    }

    //浏览器能连接的有限制
    (new Array(100)).fill(null).forEach(conn);

    document.getElementById("sendb").onclick=function(){ // 监测 id=“sendb”的 按钮 触发 onclick 就会发送数据 send //
        var txt = document.getElementById("snedTxt").value;
        // ws.send(txt);
        if(arr.length){
            arr.forEach((ws, i)=>{
                ws.send(txt + '-' + i)
            });
        }
    }
</script>
</body>
</html>